<template>
  <BasicDrawer title="数据规则/按钮权限配置" :width="365" @close="onClose" @register="registerDrawer">
    <a-spin :spinning="loading">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="数据规则" key="1">
          <a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
            <a-row>
              <a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
                <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
              </a-col>
              <a-col :span="24">
                <div style="width: 100%; margin-top: 15px">
                  <a-button type="primary" :loading="loading" :size="'small'" preIcon="ant-design:save-filled" @click="saveDataRuleForRole">
                    <span>点击保存</span>
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </a-checkbox-group>
          <a-empty v-else description="无配置信息" />
        </a-tab-pane>
        <!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
      </a-tabs>
    </a-spin>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, unref } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"

  import { queryDepartRoleDataRule, saveDepartRoleDataRule } from "../depart.user.api"

  defineEmits(["register"])
  const loading = ref<boolean>(false)
  const departId = ref("")
  const functionId = ref("")
  const roleId = ref("")
  const dataRuleList = ref<Array<any>>([])
  const dataRuleChecked = ref<Array<any>>([])

  // 注册抽屉组件
  const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
    roleId.value = unref(data.roleId)
    departId.value = unref(data.departId)
    functionId.value = unref(data.functionId)
    loadData()
  })

  async function loadData() {
    try {
      loading.value = true
      const { datarule, drChecked } = await queryDepartRoleDataRule(functionId, departId, roleId)
      dataRuleList.value = datarule
      if (drChecked) {
        dataRuleChecked.value = drChecked.split(",")
      }
    } finally {
      loading.value = false
    }
  }

  function saveDataRuleForRole() {
    let params = {
      permissionId: functionId.value,
      roleId: roleId.value,
      dataRuleIds: dataRuleChecked.value.join(","),
    }
    saveDepartRoleDataRule(params)
  }

  function onClose() {
    doReset()
  }

  function doReset() {
    functionId.value = ""
    roleId.value = ""
    dataRuleList.value = []
    dataRuleChecked.value = []
  }
</script>
